<template>
  <div class="form-single-fragment third-party-dlg" style="position: relative">
    <el-form
      ref="form"
      class="full-width-input form-box"
      :model="formData"
      :rules="rules"
      style="width: 100%"
      label-width="80px"
      :size="formItemSize"
      label-position="left"
      @submit.prevent
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="脚本类型" prop="eventType">
            <el-select
              v-model="formData.eventType"
              :clearable="true"
              placeholder="脚本类型"
              style="width: 200px"
              @change="onEventTypeChange"
            >
              <el-option
                v-for="item in dialogParams.eventList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item>
            <el-row class="no-scroll flex-box" style="width: 100%" justify="end">
              <el-button type="primary" :size="formItemSize" @click="onSubmit"> 保存 </el-button>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15" justify="space-between">
        <el-col :span="11" style="height: 640px">
          <el-row>
            <ScriptEditor
              :value="formScriptString"
              title="表单数据"
              :options="{ readOnly: true }"
              style="width: 100%; height: 640px; border: 1px solid #dcdcdc"
            />
          </el-row>
        </el-col>
        <el-col :span="13" style="height: 640px">
          <el-row>
            <ScriptEditor
              v-model:value="formData.scriptString"
              style="width: 100%; height: 640px; border: 1px solid #dcdcdc"
              :title="currentEvent ? currentEvent.functionName : '事件脚本'"
              :completer="formDataCompleter"
            />
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { render } from 'ejs';
import { findItemFromList } from '@/common/utils';
import ScriptEditor from '@/components/ScriptEditor/index.vue';
import { ANY_OBJECT } from '@/types/generic';
import { DialogProp } from '@/components/Dialog/types';
import { OnlineFormEventType, SysOnlineFormType } from '@/common/staticDict';
import { SysOnlineRelationType } from '@/common/staticDict/online';
import { useThirdParty } from '@/components/thirdParty/hooks';
import { ThirdProps } from '@/components/thirdParty/types';
import { useLayoutStore } from '@/store';
import onlineFormDataTemplate from './onlineFormDataTemplate';
import { OnlineFormEventList, OnlineMobileFormEventList } from './event';
const layoutStore = useLayoutStore();

// Jie. 20250525 formData代码提示
const formDataCompleter = ref<ANY_OBJECT>({});

interface IProps extends ThirdProps {
  rowData?: ANY_OBJECT;
  eventList: Array<ANY_OBJECT>;
  formConfig: ANY_OBJECT;
  mode: string;
  // 当使用Dialog.show弹出组件时，须定义该prop属性，以便对dialog进行回调
  dialog?: DialogProp<ANY_OBJECT>;
}
const props = defineProps<IProps>();
const formItemSize = computed(() => {
  return layoutStore.defaultFormItemSize;
});

const { thirdParams, onCloseThirdDialog } = useThirdParty(props);

const form = ref();
const formData = ref<ANY_OBJECT>({
  eventType: '',
  scriptString: '',
});
const formScriptString = ref('');
const rules = {
  eventType: {
    required: true,
    message: '请选择脚本类型',
    trigger: 'blur',
  },
};

const dialogParams = computed(() => {
  return {
    rowData: props.rowData || thirdParams.value.rowData,
    eventList: props.eventList || thirdParams.value.eventList,
    formConfig: props.formConfig || thirdParams.value.formConfig,
    mode: props.mode || thirdParams.value.mode,
  };
});
const currentEvent = computed(() => {
  return findItemFromList(
    dialogParams.value.mode === 'pc' ? OnlineFormEventList : OnlineMobileFormEventList,
    formData.value.eventType,
    'id',
  );
});

const onSubmit = () => {
  let params = {
    ...formData.value,
    showName: OnlineFormEventType.getValue(formData.value.eventType),
  };

  form.value.validate((valid: boolean) => {
    if (!valid) return;
    if (props.dialog) {
      props.dialog.submit(params);
    } else {
      onCloseThirdDialog(true, dialogParams.value.rowData, params);
    }
  });
};

const onEventTypeChange = () => {
  formData.value.scriptString = currentEvent.value ? currentEvent.value.comment.trim() : '';
};

onMounted(() => {
  let param = {
    tableList: [] as ANY_OBJECT[],
    customFieldList: dialogParams.value.formConfig.form.customFieldList,
    widgetList: dialogParams.value.formConfig.form.allWidgetList,
  };
  if (dialogParams.value.formConfig.getMasterTable) {
    if (dialogParams.value.formConfig.getMasterTable.relationType == null) {
      if (dialogParams.value.formConfig.form.formType === SysOnlineFormType.QUERY) {
        // 主表查询页面
        param.tableList = dialogParams.value.formConfig.getAllTableList
          .map((table: ANY_OBJECT) => {
            return table.relationType !== SysOnlineRelationType.ONE_TO_MANY
              ? {
                  showName: `${table.tag.datasourceName || table.tag.relationName} (${
                    SysOnlineRelationType.getValue(table.relationType) || '主表'
                  })`,
                  variableName: table.tag.variableName,
                  columnList: table.columnList.filter(
                    (column: ANY_OBJECT) => column.filterType !== 0,
                  ),
                  isObject: true,
                }
              : undefined;
          })
          .filter((item: ANY_OBJECT) => item != null);
      } else {
        // 主表编辑页面
        param.tableList = dialogParams.value.formConfig.getAllTableList
          .map((table: ANY_OBJECT) => {
            return {
              showName: `${table.tag.datasourceName || table.tag.relationName} (${
                SysOnlineRelationType.getValue(table.relationType) || '主表'
              })`,
              variableName: table.tag.variableName,
              columnList: table.columnList,
              isObject: table.relationType !== SysOnlineRelationType.ONE_TO_MANY,
            };
          })
          .filter((item: ANY_OBJECT) => item != null);
      }
    } else {
      let table: ANY_OBJECT = props.formConfig.getMasterTable;
      param.tableList = [
        {
          showName: `${table.tag.datasourceName || table.tag.relationName} (${
            SysOnlineRelationType.getValue(table.relationType) || '主表'
          })`,
          variableName: table.tag.variableName,
          columnList:
            props.formConfig.form.formType === SysOnlineFormType.QUERY
              ? table.columnList.filter((column: ANY_OBJECT) => column.filterType !== 0)
              : table.columnList,
          isObject: true,
        },
      ];
    }
  }
  let tempString =
    dialogParams.value.formConfig.form.pageCode == null
      ? onlineFormDataTemplate.queryFrom.trim()
      : onlineFormDataTemplate.reportForm.trim();
  formScriptString.value = render(tempString, {
    form: param,
  });

  // Jie. 20250525 formData代码提示
  formDataCompleter.value = {
    triggerCharacters: ['formData.'],

    getCompletions: function (editor, session, pos, prefix, callback) {
      interface Completion {
        caption: string;
        value: string;
        meta: string;
        docText: string;
        type: string;
        score: number;
      }

      let completions: Completion[] = [];

      // 处理表格列表
      param.tableList.forEach((table, index) => {
        // 添加表格对象本身
        completions.push({
          caption: table.variableName,
          value: table.variableName,
          meta: table.isObject ? 'object' : 'array',
          docText: table.showName,
          type: table.isObject ? 'object' : 'array',
          score: 100 - index,
        });

        if (table.isObject) {
          // 如果是对象类型，添加其所有属性
          table.columnList.forEach((column, colIndex) => {
            completions.push({
              caption: `${table.variableName}.${column.columnName}`,
              value: `${table.variableName}.${column.columnName}`,
              meta: 'property',
              docText: column.columnComment || column.columnName,
              type: 'object',
              score: 99 - index - colIndex * 0.01,
            });
          });
        } else {
          // 如果是数组类型，添加数组项的属性说明
          table.columnList.forEach((column, colIndex) => {
            completions.push({
              caption: `${table.variableName}[].${column.columnName}`,
              value: `${table.variableName}[].${column.columnName}`,
              meta: 'property',
              docText: column.columnComment || column.columnName,
              type: 'object',
              score: 99 - index - colIndex * 0.01,
            });
          });
        }
      });

      // 处理自定义字段
      if (param.customFieldList && param.customFieldList.length > 0) {
        // 添加自定义字段对象
        completions.push({
          caption: 'customField',
          value: 'customField',
          meta: 'object',
          docText: '自定义字段',
          type: 'object',
          score: 50,
        });

        // 添加自定义字段的属性
        param.customFieldList.forEach((field, index) => {
          completions.push({
            caption: `customField.${field.fieldName}`,
            value: `customField.${field.fieldName}`,
            meta: 'property',
            docText: field.fieldComment || field.fieldName,
            type: 'object',
            score: 49 - index * 0.01,
          });
        });
      }

      callback(null, completions);
    },
  };

  if (dialogParams.value.rowData) {
    formData.value = {
      ...dialogParams.value.rowData,
    };
  }
});
</script>
